<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src='./jquery/jquery.min.js'></script> -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .divBox {
            width: 600px;
            margin: 20px auto;
            overflow: hidden;
            position: relative;
        }

        .divBox .ulBox {
            width: 600%;
            position: relative;

        }

        .divBox .ulBox .active {
            background-color: #d1ba74;

        }

        .divBox .ulBox li {
            width: 600px;
            float: left;
        }

        .divBox .ulBox li img {
            display: block;
            width: 100%;
        }

        .divBox .olBox {
            width: 100%;
            height: 40px;
            line-height: 40px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: none;
        }

        .divBox .olBox li {
            font-size: 30px;
            text-align: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #3e3e;
            float: left;
            color: white;
        }

        .divBox .olBox .right {
            float: right;
        }

        .divBox .circleBox {
            position: absolute;
            right: 40px;
            bottom: 20px;
        }

        .divBox .circleBox li {
            float: left;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #ecad9e;
            margin-right: 5px;
            text-align: center;
            line-height: 20px;
            color: white;
        }
        .active {
            background-color: #3e3e !important;
        }
    </style>
</head>

<body>
    <div class='divBox'>
        <ul class='ulBox'>
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
        </ul>


        <ol class='olBox'>
            <li class='left'>&lt;</li>
            <li class='right'>&gt;</li>
        </ol>

        <ul class='circleBox'>

        </ul>

    </div>



    <script>

        /* 1,动态生成小圆点(根据图片的数量去动态生成)
        2，鼠标移入 左右箭头显示 并且图片停止   鼠标离开  左右箭头隐藏  图片继续移动
        3，点击小圆点可以切换图片
        4，点击左右箭头可以切换图片
        5，图片可以自动轮播*/


        // 1,动态生成小圆点(根据图片的数量去动态生成)
        var divBox = document.querySelector('.divBox');
        var ulBox = document.querySelector('.ulBox');
        var olBox = document.querySelector('.olBox');
        var leftArr = document.querySelector('.left');
        var rightArr = document.querySelector('.right');
        var circleBox = document.querySelector('.circleBox')
        var ulLis = ulBox.querySelectorAll('li');
        var divWidth = divBox.offsetWidth;
        var flag = true;
        var count = 0;
        var circleNum = 0;
        console.log(ulLis.length)
        for (var i = 0; i < ulLis.length; i++) {
            var newLi = document.createElement('li');
            newLi.innerText = i + 1;
            newLi.setAttribute('index', i)
            circleBox.append(newLi);
        }
         


        // 2，鼠标移入 左右箭头显示 并且图片停止   鼠标离开  左右箭头隐藏  图片继续移动
        divBox.onmouseover = function () {
            olBox.style.display = 'block';
            clearInterval(timerId2);
        }
        divBox.onmouseout = function () {
            olBox.style.display = 'none';
            timerId2 = setInterval(function(){
            rightArr.click();
        },1000)
        }

        // 3，点击小圆点可以切换图片
        // console.log(1)
        var circleLis = circleBox.getElementsByTagName('li')
        // console.log(circleLis)



        // 第一个圆点高亮
        circleLis[0].classList.add('active');


        
        for (var i = 0; i < circleLis.length; i++) {
            circleLis[i].onclick = function () {
                if(flag){
                    flag=false;
                    console.log(this)
                    circleNum = this.getAttribute('index');
                    count = circleNum;
                    // console.log(circleBox.children);
                    // circleBox.children.classList.remove('active');
                    // this.classList.add('active');
                    // console.log(this.);
                    // this.siblings.classList.remove('active');
                    follow1(count)
                dis = -divWidth * count;
                
                myanimate(ulBox, dis, 10, 40);
                } 
            }
        }


        // 4，点击左右箭头可以切换图片*/

        // 4.1 点击右箭头实现切换
        var img  = ulBox.children[0].cloneNode(true);
        ulBox.appendChild(img)
        rightArr.onclick = function(){
            if(flag){
                flag=false;
                if(count == circleLis.length){
                count = 0;
                // follow1(0);
                ulBox.style.left = '0px';
                
            }
            
            count++;
            console.log(count)
            circleNum++;
            if(circleNum == circleLis.length){
                    circleNum = 0;
                    follow1(circleNum);
                }else {
                    follow1(circleNum);
                }
            
            myanimate(ulBox, -count*divWidth, 10, 40);
            }
           
        }

        // 4.1 点击左箭头实现切换
        
        leftArr.onclick = function(){
            if(flag){
                flag=false;
                if(count == 0){
                count = circleLis.length;
                dis1 = count * divWidth
                ulBox.style.left = -dis1 + 'px';
                circleNum=circleLis.length;
            } 
            count--;
            // if(circleNum){

            // }
            circleNum--;
            follow1(circleNum);
            myanimate(ulBox, -count*divWidth, 10, 40);
            }
           
        }


        // 5，图片可以自动轮播
        var timerId2 = setInterval(function(){
            rightArr.click();
        },1000)

        // 鼠标移入自动轮播停止


        // 小圆点动态跟随
        function follow1(circleNum){
            for(var j = 0; j < circleLis.length; j++){
                        circleLis[j].classList.remove('active')
                    }
                    // if(circleNum == circleLis.length){
                    //     circleNum
                    // }
                    circleLis[circleNum].classList.add('active');
        }
        






























        function myanimate(ele, distance, step, time) {
          
               
                if (ele.timerId) {
                    clearInterval(ele.timerId);
                }
                ele.timerId = setInterval(function () {
                    var steps = (distance - ele.offsetLeft) / step;
                    steps = steps > 0 ? Math.ceil(steps) : Math.floor(steps);
                    if (ele.offsetLeft == distance) {
                        ele.style.left = distance + 'px';
                        clearInterval(ele.timerId);
                        flag = true;
                        console.log(flag)
                        return false;
                    }
                    ele.style.left = ele.offsetLeft + steps + 'px';
                }, time)
            

        }

    </script>
</body>

</html>